<template>
	<view class="index w-full flex flex-col items-center" style="color: #929292;">
		<view style="width: 1350px;">
			<view class="flex w-full gap-20 text-3xl py-10">
				<view class="cursor-pointer" :class="{'text-white':tabs.activeId==item.id}" v-for="(item,index) in tabs.list" :key="index"
				@click="clickTab(item)">{{item.name}}</view>
			</view>
			<view class="flex gap-20">
				<view v-for="(item,index) in pageList" :key="index">
					<image :src="item.img" style="width: 310px;height: 164px;border-radius: 10px;"></image>
					<view class="text-white text-2xl px-8 py-4 box-border" style="min-height: 100px;">{{item.title}}</view>
					<view class="px-8 text-lg">{{item.time}}</view>
				</view>
			</view>
			
			
			
		</view>
		<footerPage></footerPage>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				tabs:{
					activeId:'1',
					list:[
						{name:this.$t('register.xinshoujiaocheng'),id:'1'},
						{name:this.$t('register.jiaoyicelue'),id:'2'},
						{name:this.$t('register.hangyeyanjiu'),id:'3'},
						{name:this.$t('register.shichangdongtai'),id:'4'},
					]
				},
				pageList:[
					{img:'/static/images/bibi/bg1.png',title:'什麽是比特幣？',time:'2025-05-19 10:23:42'},
					{img:'/static/images/bibi/bg2.png',title:'什麽是KYC驗證？如何完成KYC驗證？',time:'2025-05-19 10:23:42'},
					{img:'/static/images/bibi/bg3.png',title:'什麽是區塊鏈？',time:'2025-05-19 10:23:42'},
					{img:'/static/images/bibi/bg1.png',title:'如何購買比特幣？',time:'2025-05-19 10:23:42'},
				]
			}
		},
		computed: {
			...mapState({
				mode: state => state.app.mode,
				sysConfig: state => state.app.sysConfig,
			})
		},
		methods: {
			clickTab(row){
				this.tabs.activeId = row.id
				if(this.tabs.activeId=='1'){
					this.pageList = [
						{img:'/static/images/bibi/bg1.png',title:'什麽是比特幣？',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg2.png',title:'什麽是KYC驗證？如何完成KYC驗證？',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg3.png',title:'什麽是區塊鏈？',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg1.png',title:'如何購買比特幣？',time:'2025-05-19 10:23:42'},
					]
				}else if(this.tabs.activeId=='2'){
					this.pageList = [
						{img:'/static/images/bibi/bg4.jpg',title:'零基礎學習幣市分析| 2 單根K線的演變及寓意',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg4.jpg',title:'零基礎學幣市分析|3 看漲K線組合',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg1.png',title:'零基礎學幣市分析|1 從價格到K線',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg1.png',title:'零基礎學習幣市分析| 4 看跌K線組合',time:'2025-05-19 10:23:42'},
					]
				}else if(this.tabs.activeId=='3'){
					this.pageList = [
						{img:'/static/images/bibi/bg1.png',title:'什麽是比特幣？',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg2.png',title:'什麽是KYC驗證？如何完成KYC驗證？',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg3.png',title:'什麽是區塊鏈？',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg1.png',title:'如何購買比特幣？',time:'2025-05-19 10:23:42'},
					]
				}else if(this.tabs.activeId=='4'){
					this.pageList = [
						{img:'/static/images/bibi/bg4.jpg',title:'零基礎學習幣市分析| 2 單根K線的演變及寓意',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg4.jpg',title:'零基礎學幣市分析|3 看漲K線組合',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg1.png',title:'零基礎學幣市分析|1 從價格到K線',time:'2025-05-19 10:23:42'},
						{img:'/static/images/bibi/bg1.png',title:'零基礎學習幣市分析| 4 看跌K線組合',time:'2025-05-19 10:23:42'},
					]
				}
			}
		}
	}
</script>

<style scoped lang="scss">

</style>